<!--
    @ author:小恶魔
    @ datetime: 2020-7-26
 -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的消息</title>

    <link rel="stylesheet" href="/static/logistics/css/bootstrap4.5.css">
    <link rel="stylesheet" href="/static/admin/lib/font-awesome-4.7.0/css/font-awesome.css">
    <style>
        .checkbox-custom {
            position: relative;
            padding: 0 15px 0 25px;
            margin-bottom: 7px;
            margin-top: 0;
            display: inline-block;
        }
        /*
        将初始的checkbox的样式改变
        */
        .checkbox-custom input[type="checkbox"] {
            opacity: 0;/*将初始的checkbox隐藏起来*/
            position: absolute;
            cursor: pointer;
            z-index: 2;
            margin: -6px 0 0 0;
            top: 50%;
            left: 3px;
        }
        /*
        设计新的checkbox，位置
        */
        .checkbox-custom label:before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -9px;
            width: 19px;
            height: 18px;
            display: inline-block;
            border-radius: 2px;
            border: 1px solid #bbb;
            background: #fff;
        }
        /*
        点击初始的checkbox，将新的checkbox关联起来
        */
        .checkbox-custom input[type="checkbox"]:checked +label:after {
            position: absolute;
            display: inline-block;
            font-family: 'Glyphicons Halflings';
            content: "✔";
            top: 42%;
            left: 3px;
            margin-top: -5px;
            font-size: 11px;
            line-height: 1;
            width: 16px;
            height: 16px;
            color: #333;
        }
        .checkbox-custom label {
            cursor: pointer;
            line-height: 1.2;
            font-weight: normal;/*改变了rememberme的字体*/
            margin-bottom: 0;
            text-align: left;
        }
    </style>
</head>
<body>
<!-- 头部文件 -->
<div th:replace="~{/logistics/header::html}"></div>
<div class="bg-light">
    <div class="container">
        <div class="row">
            <!-- 面包屑导航 -->
            <div th:replace="~{/logistics/navigation::html}"></div>

            <div class="col-sm-12 p-3 rounded" style="background-color: white;">

                <div class="row p-2">
                    <!-- 左边信息导航栏 -->
                    <div class="text-center" th:replace="~{/logistics/leftMess::html}"></div>

                    <div class="col-sm-10">

                        <!-- 选项卡 -->
                        <ul class="nav nav-tabs">
                            <li class="nav-item">
                                <a class="nav-link text-warning active" data-toggle="tab" href="#home">全部消息</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-warning" data-toggle="tab" href="#menu1">包裹消息</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-warning" data-toggle="tab" href="#menu2">活动消息</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-warning" data-toggle="tab" href="#menu3">系统消息</a>
                            </li>
                        </ul>

                        <!-- 选项卡对应内容 -->
                        <div class="tab-content">
                            <div class="tab-pane active container" id="home">

                                <div class="accordion" id="accordionExample">
                                    <div class="card border-top border-bottom-0 border-right-0 border-left-0 mt-1">
                                        <div class="card-header" id="headingOne" style="background-color:rgba(255,255,255,0.5);">
                                            <h2 class="mb-0" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                                <span class="btn btn-link text-body text-left" >
                                                    <div class="checkbox-custom checkbox-default">
                                                        <input type="checkbox" id="RememberMe">
                                                        <label for="RememberMe">【活动消息】积分消息</label>
                                                    </div>

                                                </span>
                                                <span class="pull-right font-weight-light" style="font-size: 15px;">2020-07-24 19:44:59</span>
                                                <span class="badge badge-danger pull-right font-weight-light" style="font-size: 15px;">未读</span>
                                            </h2>
                                        </div>

                                        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                                            <div class="card-body">
                                               <span class="text-secondary">快捷登录：恭喜您快捷登录注册成功，小圆送您100积分。</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="checkbox-custom checkbox-default mt-2">
                                    <input type="checkbox" id="readId">
                                    <label for="readId">全部标为已读</label>
                                </div>


                            </div>
                            <div class="tab-pane fade container" id="menu1">

                                <div class="accordion" id="accordionExample2">
                                    <div class="card border-top border-bottom-0 border-right-0 border-left-0 mt-1">
                                        <div class="card-header" id="headingOne2" style="background-color:rgba(255,255,255,0.5);">
                                            <h2 class="mb-0" data-toggle="collapse" data-target="#collapseOne2" aria-expanded="true" aria-controls="collapseOne">
                                                <span class="btn btn-link text-body text-left" >
                                                    <div class="checkbox-custom checkbox-default">
                                                        <input type="checkbox">
                                                        <label >【活动消息】积分消息</label>
                                                    </div>

                                                </span>
                                                <span class="pull-right font-weight-light" style="font-size: 15px;">2020-07-24 19:44:59</span>
                                                <span class="badge badge-danger pull-right font-weight-light" style="font-size: 15px;">未读</span>
                                            </h2>
                                        </div>

                                        <div id="collapseOne2" class="collapse show" aria-labelledby="headingOne2" data-parent="#accordionExample2">
                                            <div class="card-body">
                                                <span class="text-secondary">快捷登录：恭喜您快捷登录注册成功，小圆送您100积分。</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="tab-pane fade container" id="menu2">

                                <div class="accordion" id="accordionExample3">
                                    <div class="card border-top border-bottom-0 border-right-0 border-left-0 mt-1">
                                        <div class="card-header" id="headingOne3" style="background-color:rgba(255,255,255,0.5);">
                                            <h2 class="mb-0" data-toggle="collapse" data-target="#collapseOne3" aria-expanded="true" aria-controls="collapseOne">
                                                <span class="btn btn-link text-body text-left" >
                                                    <div class="checkbox-custom checkbox-default">
                                                        <input type="checkbox" >
                                                        <label>【活动消息】积分消息</label>
                                                    </div>

                                                </span>
                                                <span class="pull-right font-weight-light" style="font-size: 15px;">2020-07-24 19:44:59</span>
                                                <span class="badge badge-danger pull-right font-weight-light" style="font-size: 15px;">未读</span>
                                            </h2>
                                        </div>

                                        <div id="collapseOne3" class="collapse show" aria-labelledby="headingOne3" data-parent="#accordionExample3">
                                            <div class="card-body">
                                                <span class="text-secondary">快捷登录：恭喜您快捷登录注册成功，小圆送您100积分。</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="tab-pane fade container" id="menu3">

                                <div class="accordion" id="accordionExample4">
                                    <div class="card border-top border-bottom-0 border-right-0 border-left-0 mt-1">
                                        <div class="card-header" id="headingOne4" style="background-color:rgba(255,255,255,0.5);">
                                            <h2 class="mb-0" data-toggle="collapse" data-target="#collapseOne4" aria-expanded="true" aria-controls="collapseOne">
                                                <span class="btn btn-link text-body text-left" >
                                                    <div class="checkbox-custom checkbox-default">
                                                        <input type="checkbox">
                                                        <label>【活动消息】积分消息</label>
                                                    </div>

                                                </span>
                                                <span class="pull-right font-weight-light" style="font-size: 15px;">2020-07-24 19:44:59</span>
                                                <span class="badge badge-danger pull-right font-weight-light" style="font-size: 15px;">未读</span>
                                            </h2>
                                        </div>

                                        <div id="collapseOne4" class="collapse show" aria-labelledby="headingOne4" data-parent="#accordionExample4">
                                            <div class="card-body">
                                                <span class="text-secondary">快捷登录：恭喜您快捷登录注册成功，小圆送您100积分。</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>

                </div>


            </div>
        </div>
    </div>
</div>


<div th:replace="~{/logistics/footer::html}"></div>
<script src="/static/logistics/js/jquery-2.2.4.js"></script>
<script src="/static/logistics/gijgo-combined-1.9.13/js/gijgo.min.js" type="text/javascript"></script>

<script src="/static/logistics/js/bootstrap4.5.js"></script>

</body>
</html>
